<template>
  <payPwdPop></payPwdPop>

  <!-- 上传视频封面 -->
  <upload
    ref="uploadVideoThumbRef"
    @sucess="uploadVideoThumbSucess"
    v-show="false"
    :isManual="true"
    fileName="community"
    :returnFile="true"
  >
  </upload>

  <!-- 上传附件 -->
  <UploadFile
    ref="uploadFileRef"
    @confirm="uploadFileConfirm"
    :uploadedList="communityForm.file_list"
  ></UploadFile>

  <!-- 投票弹框 -->
  <vote
    ref="voteRef"
    @confirm="voteConfirm"
    :editVoteList="communityForm.vote_list"
  ></vote>

  <!-- 圈子 -->
  <circleVue ref="circleRef" @confirm="circleConfirm"></circleVue>

  <!-- 话题 -->
  <topicPop ref="topicRef" @confirm="topicConfirm" :topic="communityForm.tags"></topicPop>

  <!-- 超链接 -->
  <linkVue ref="linkRef" @confirm="linkConfirm"></linkVue>

  <!-- 全部评论 -->
  <!-- <commentPop></commentPop> -->

  <!-- 付费设置 -->
  <paySettingPop
    ref="paySettingRef"
    @confirm="paySettingConfirm"
    :setting="communityForm.pay_obj"
  ></paySettingPop>

  <div class="communityCenter-box">
    <!-- 未登录 -->
    <div
      class="communityCenter-no-login community-card-box f-d-c f-j-a-c"
      v-if="!userInfo"
    >
      <svg-icon name="icon-wdl" class="icon-wdl"></svg-icon>
      <div class="communityCenter-no-login-title">您还未登录</div>
      <div class="communityCenter-no-login-text">登录后可发布文章以及阅读等多话题</div>
      <!-- <div class="btns-box f-j-a-c">
        <div class="f-j-a-c community-btn-class community-btn-default">登录</div>
        <div class="f-j-a-c community-btn-class community-btn-green">快速注册</div>
      </div> -->
    </div>

    <!-- 发布帖子 -->
    <div class="communityCenter-post-box community-card-box flex" v-else>
      <userAvatar :userImgs="userInfo.user_avatar"  :showDv="userInfo.is_official == 1" :imgWidth="40"
                    :divWidth="46"></userAvatar>
      <div class="communityCenter-post">
        <!-- <div class="communityCenter-post-input"> -->
        <el-input
          id="inputor"
          class="communityCenter-post-input"
          ref="promptsInput"
          type="textarea"
          autosize
          v-model="communityForm.posts_content"
          placeholder="分享点什么~"
        ></el-input>
        <!-- </div> -->

        <!-- 上传图片列表 -->
        <div class="upload-img-list flex">
          <div
            class="upload-item"
            v-for="(item, index) in communityForm.image_urls"
            :key="index"
            v-loading="!item.url"
          >
            <el-image :src="item.url" fit="cover">
              <template #error>
                <div class="image-slot"></div>
              </template>
            </el-image>
            <svg-icon
              class="upload-close"
              name="icon-gb"
              @click="imgUploadDel(item, index)"
            ></svg-icon>
          </div>

          <upload
          :returnFile="true"
            fileName="community"
            ref="uploadRef"
            @sucess="uploadsucess"
            @fileQueued="fileQueued"
            :limit="9 - communityForm.image_urls.length"
            v-show="
              communityForm.image_urls.length && communityForm.image_urls.length < 9
            "
          >
            <div class="upload-more upload-item f-j-a-c">
              <svg-icon name="icon-tj-24" class="svg-icon"></svg-icon>
            </div>
          </upload>
        </div>

        <!-- 投票回显 -->
        <div
          class="vote-info"
          v-if="communityForm.vote_list && communityForm.vote_list.length"
        >
          <div class="vote-info-header f-a-c">
            <svg-icon
              name="icon-bj"
              class="svg-icon"
              @click="attachmentListClick({ type: 'pop', ref: 'voteRef' })"
            ></svg-icon>
            <svg-icon
              name="icon-vote-tsc"
              class="svg-icon"
              @click="voteConfirm([])"
            ></svg-icon>
          </div>

          <div class="vote-info-detail f-a-c">
            <svg-icon name="icon-tp-yx" class="svg-icon"></svg-icon>
            <span>投票：</span>
            <span v-for="(item, index) in communityForm.vote_list" :key="index">
              {{ item.value }};
            </span>
          </div>
        </div>

        <!-- 付费回显 -->
        <div
          class="vote-info"
          v-if="
            communityForm.pay_obj &&
            (communityForm.pay_obj.words_percent < 100 ||
              communityForm.pay_obj.price ||
              communityForm.pay_obj.hidden)
          "
        >
          <div class="vote-info-header f-a-c">
            <svg-icon
              name="icon-bj"
              class="svg-icon"
              @click="attachmentListClick({ type: 'pop', ref: 'paySettingRef' })"
            ></svg-icon>
            <svg-icon
              name="icon-vote-tsc"
              class="svg-icon"
              @click="paySettingConfirm('')"
            ></svg-icon>
          </div>
          <div class="vote-info-detail f-a-c">
            <svg-icon name="icon-fufei-yx" class="svg-icon"></svg-icon>
            <span>付费内容: {{ 100 - communityForm.pay_obj.words_percent }}; &nbsp;</span>
            <span>价格: {{ communityForm.pay_obj.price || 0 }} 余额; &nbsp;</span>
            <span>隐藏内容: {{ communityForm.pay_obj.hidden.length }}字符;&nbsp; </span>
            <span
              >附件付费: {{ communityForm.pay_obj.is_file == 1 ? "是" : "否" }};
            </span>
          </div>
        </div>

        <!-- 附件回显 -->
        <div
          class="file-info f-j-sb-a-c"
          v-for="(item, index) in communityForm.file_list"
          :key="index"
        >
          <div class="f-a-c">
            <svg-icon name="icon-file" class="svg-icon"></svg-icon>
            <span>{{ item.name }}</span>
          </div>
          <svg-icon
            name="icon-vote-tsc"
            class="svg-icon"
            @click="removeFileList(item, index)"
          ></svg-icon>
        </div>

        <!-- 视频回显 -->
        <div class="video-info" v-if="videoFile">
          <!-- 视频上传进度 -->
          <div
            class="video-progress-box f-d-c f-j-c"
            v-if="videoFile && videoProgress < 100 && !communityForm.video_url"
          >
            <div class="f-j-sb-a-c upload-progress-title">
              <span>{{ videoProgress }}%</span>
              <span
                >{{
                  videoFile.fileSize
                    ? toFixedNum((videoFile.fileSize * videoProgress) / 100, 2)
                    : 0
                }}
                MB/{{ videoFile.fileSize || 0 }}MB</span
              >
            </div>
            <div class="upload-progress">
              <div
                class="upload-progress-inner"
                :style="{ width: videoProgress + '%' }"
              ></div>
            </div>
          </div>

          <div class="video-box" v-if="communityForm.video_url">
            <video
              :src="communityForm.video_url"
              class="video-dom"
              :poster="communityForm.video_thumb_url"
              ref="videoRef"
              controls
            ></video>
            <svg-icon class="upload-close" name="icon-gb" @click="removeVideo"></svg-icon>
          </div>
        </div>

        <!-- 圈子/话题标签 -->
        <div class="tag-box flex" v-if="selectCircle || communityForm.tags">
          <div
            class="tag-item f-j-a-c"
            v-for="(item, index) in communityForm.tags"
            :key="index"
          >
            <svg-icon class="svg-icon" name="icon-ht"></svg-icon>
            <span>{{ item.tags_name }}</span>
            <svg-icon
              class="svg-icon"
              name="icon-tag-tsc"
              @click="topicRemove(item, index)"
            ></svg-icon>
          </div>

          <!-- 圈子 -->
          <div class="tag-item f-j-a-c" v-if="selectCircle">
            <svg-icon class="svg-icon" name="icon-qz"></svg-icon>
            <span>{{ selectCircle.circle_name }}</span>
            <svg-icon
              class="svg-icon"
              name="icon-tag-tsc"
              @click="circleConfirm('')"
            ></svg-icon>
          </div>
        </div>

        <!-- 添加其他附件等操作列表 -->
        <div class="attachment-box f-a-c">
          <!-- 附加操作列表 -->
          <div class="attachment-list flex">
            <div v-for="(item, index) in attachmentList" :key="index">
              <!-- 上传图片 -->
              <upload
              :returnFile="true"
                v-if="item.type == 'img'"
                ref="uploadRef"
                @sucess="uploadsucess"
                @fileQueued="fileQueued"
                :limit="item.maxLength - communityForm.image_urls.length"
                :disabled="item.disabled"
                fileName="community"
              >
                <div
                  class="attachment-item f-a-c"
                  :class="{
                    'attachment-item-disabled': item.disabled,
                    'attachment-item-hover': !item.disabled,
                  }"
                >
                  <svg-icon
                    :name="item.icon"
                    class="svg-icon svg-icon-default"
                  ></svg-icon>
                  <svg-icon
                    :name="item.iconActive"
                    class="svg-icon svg-icon-active"
                  ></svg-icon>
                  <span>{{ item.title }}</span>
                </div>
              </upload>

              <!-- 上传视频 -->
              <upload
              :returnFile="true"
                v-else-if="item.type == 'video'"
                ref="uploadRef"
                @sucess="videoUploadSucess"
                @fileQueued="videoUploadFileQueued"
                @progressChange="videoProgressChange"
                :disabled="item.disabled"
                type="mp4,avi,rmvb,mkv"
                fileName="community"
              >
                <div
                  class="attachment-item f-a-c"
                  :class="{
                    'attachment-item-disabled': item.disabled,
                    'attachment-item-hover': !item.disabled,
                  }"
                >
                  <svg-icon
                    :name="item.icon"
                    class="svg-icon svg-icon-default"
                  ></svg-icon>
                  <svg-icon
                    :name="item.iconActive"
                    class="svg-icon svg-icon-active"
                  ></svg-icon>
                  <span>{{ item.title }}</span>
                </div>
              </upload>

              <!-- 其他操作 -->
              <div
                class="attachment-item f-a-c"
                :class="{
                  'attachment-item-disabled': item.disabled,
                  'attachment-item-hover': !item.disabled,
                }"
                v-else
                @click="attachmentListClick(item)"
              >
                <svg-icon :name="item.icon" class="svg-icon svg-icon-default"></svg-icon>
                <svg-icon
                  :name="item.iconActive"
                  class="svg-icon svg-icon-active"
                ></svg-icon>
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>

          <!-- 发布按钮 -->
          <!-- <div
            class="post-btn f-j-a-c community-btn-class community-btn-green"
            :class="{ 'community-btn-disabled': !communityForm.posts_content }"
            @click="sendClick"
            :loading="sendLoading"
          >
            发布
          </div> -->
          <el-button
         
            class="post-btn f-j-a-c community-btn-class community-btn-green"
            :class="{ 'community-btn-disabled': !communityForm.posts_content }"
            @click="sendClick"
            :loading="sendLoading"
          >
            发布
          </el-button>
        </div>
      </div>
    </div>

    <!-- tab栏 -->
    <communityTab
      :tabList="tabList"
      :activeIdx="tabActive"
      @change="tabChange"
    ></communityTab>

    <!-- 帖子 -->
    <div class="community-article-list">
      <div
        class="community-card-box community-article-list-item"
        v-for="(item, index) in posts"
        :key="index"
      >
        <commentItem
          :ref="setCommentItemRef"
          :postsDetail="item"
          :commentIndex="index"
          @updateItem="updateItem"
          @videoPlay="videoPlayHandler"
          @videoEndPlay="videoEndPlayHandler"
          @voteUpdate="voteUpdate"
          @followNowUpdate="followNowUpdate"
          :videoIsPlay="videoPlayIdx === index"
        ></commentItem>
        <comment v-show="item.showComment" :postsDetail="item"></comment>
      </div>

      <div class="community-more-title f-j-a-c" v-if="posts.length >= per_page">
        <span>{{ hasMore ? "加载中..." : "没有更多了~" }}</span>
      </div>
    </div>

    <!-- 无数据展示 -->
    <div class="community-card-box community-nodata" v-if="!posts.length">
      <noData></noData>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from "vue";
import communityTab from "@/components/communityTab.vue";

import userAvatar from "@/components/userAvatar.vue";
import comment from "@/components/comment.vue";
import commentItem from "@/components/commentItem.vue";
import upload from "@/components/upload.vue";
import UploadFile from "../../components/uploadFile.vue";
import vote from "../../components/vote.vue";
import circleVue from "../../components/circle.vue";
import linkVue from "../../components/link.vue";
import commentPop from "../../components/commentPop.vue";
import paySettingPop from "../../components/paySettingPop.vue";
import topicPop from "../../components/topicPop.vue";
import payPwdPop from "../../components/payPwdPop.vue";
import { toFixedNum, dataURLtoFile } from "@/utils/common.js";
import { configData, indexPosts, postAdd } from "@/axios/community.js";
import { ElMessage } from "element-plus";
export default defineComponent({
  emits: ["setMore"],
  components: {
    userAvatar,
    comment,
    commentItem,
    upload,
    UploadFile,
    vote,
    circleVue,
    linkVue,
    commentPop,
    paySettingPop,
    topicPop,
    payPwdPop,
    communityTab,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let promptsInput = ref(null); //内容输入框
    let uploadFileRef = ref(null); //上传附件弹框
    let voteRef = ref(null); //投票弹框
    let circleRef = ref(null); //选择圈子弹框
    let linkRef = ref(null); //添加链接弹框
    let paySettingRef = ref(null); //付费设置弹框
    let topicRef = ref(null); //话题弹框
    let uploadVideoThumbRef = ref(null); //视频封面上传

    let defaultFormData = {
      address: { address_detailed: "" }, //用户地址
      circle_id: "", //圈子id
      editer: "simple", //编辑类型
      file_list: [], //文件列表
      goods: "", //商品
      image_urls: [], //图片列表
      imagetext_content: "",
      pay_obj: { words_percent: 100, is_file: 0, credit_type: 0, hidden: "", price: 0 }, //付费信息
      posts_content: "", //输入框内容
      sounds_list: [], //声音列表
      tags: "", //话题
      video_height: 0, //视频高度
      video_thumb_url: "", //视频封面
      video_url: "", //视频地址
      video_width: 0, //视频宽度
      vote_list: [], //投票列表
    };

    let data = reactive({
      prompts: "", //发布内容
      attachmentList: [
        {
          title: "图片",
          icon: "icon-tu-1",
          iconActive: "icon-tu-yx",
          type: "img",
          maxLength: 9,
          disabled: false,
        },
        {
          title: "视频",
          icon: "icon-shipin",
          iconActive: "icon-shipin-yx",
          // type: "router",
          // path: "/uploadVideo",
          type: "video",
          maxLength: 1,
          disabled: false,
        },
        {
          title: "圈子",
          icon: "icon-quanzi",
          iconActive: "icon-quanzi-yx",
          type: "pop",
          ref: "circleRef",
          disabled: false,
        },
        {
          title: "话题",
          icon: "icon-huati",
          iconActive: "icon-huati-yx",
          type: "pop",
          ref: "topicRef",
          disabled: false,
        },
        {
          title: "链接",
          icon: "icon-shequ-lianjie",
          iconActive: "icon-shequ-lianjie-yx",
          type: "pop",
          ref: "linkRef",
          disabled: false,
        },
        {
          title: "付费",
          icon: "icon-fufei",
          iconActive: "icon-fufei-yx",
          type: "pop",
          ref: "paySettingRef",
          disabled: false,
        },
        {
          title: "投票",
          icon: "icon-tp-wx",
          iconActive: "icon-tp-yx",
          type: "pop",
          ref: "voteRef",
          disabled: false,
        },
        {
          title: "附件",
          icon: "icon-fujian",
          iconActive: "icon-fujian-yx",
          type: "pop",
          ref: "uploadFileRef",
          disabled: false,
        },
      ], //附件操作列表
      tabList: [], //tab列表
      tabActive: 1, //tab栏选中,
      posts: [], //帖子列表
      communityForm: JSON.parse(JSON.stringify(defaultFormData)), //帖子数据
      selectCircle: "", //选中的圈子
      videoProgress: 0, //上传进度
      videoFile: "", //video文件

      videoPlayIdx: "", //视频播放中的元素下标
      page: 1, //帖子分页
      hasMore: true, //是否还有更多
      per_page: 10, //每页数量
      sendLoading: false, //发送防抖
    });

    let commentItemRefs = []; //帖子组件ref

    // tab栏切换
    let tabChange = (idx) => {
      // data.page = 1;
      if(data.tabActive == idx) return;
      data.tabActive = idx;
      getIndexPosts();
    };

    // 帖子动态添加ref
    let setCommentItemRef = (el) => {
      if (el) {
        commentItemRefs.push(el);
      }
    };

    // 用户信息
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    // 修改附件操作禁用状态
    let communityFormSwitch = (key, status) => {
      data.attachmentList.forEach((item) => {
        if (item.title == key) item.disabled = status;
      });
    };

    // 图片上传成功
    let uploadsucess = (obj) => {
      data.communityForm.image_urls.forEach((item) => {
        if (item.name == obj.name) {
          item.url = obj.url;
        }
      });
    };

    // 图片上传开始前
    let fileQueued = (file) => {
      console.log(file);
      let obj = {
        name: file.name,
        url: "",
      };
      data.communityForm.image_urls.push(obj);
      communityFormSwitch("视频", true);
    };

    // 删除已上传图片
    let imgUploadDel = (item, index) => {
      data.communityForm.image_urls.splice(index, 1);
      if (!data.communityForm.image_urls.length) {
        communityFormSwitch("视频", false);
      }
    };

    // 视频上传成功
    let videoUploadSucess = (obj) => {
      data.communityForm.video_url = obj.url;
      getVideoFirstImg(obj.url);
    };

    // 上视频传开始前
    let videoUploadFileQueued = (file) => {
      let obj = file;
      obj.fileSize = toFixedNum(file.size / 1024 / 1024, 2);
      data.videoFile = obj;
      console.log(data.videoFile);
      communityFormSwitch("图片", true);
      communityFormSwitch("视频", true);
    };
    // 视频上传进度
    let videoProgressChange = (pro) => {
      data.videoProgress = pro;
    };

    // 获取视频第一帧图片
    let getVideoFirstImg = (videoURL) => {
      const video = document.createElement("video"); // 创建临时video元素
      video.src = videoURL; // 设置视频地址
      video.setAttribute("crossOrigin", "Anonymous");
      video.currentTime = 1; //视频第一秒
      video.addEventListener("loadeddata", () => {
        let videoWidth = video.videoWidth;
        let videoHeight = video.videoHeight;
        const canvas = document.createElement("canvas"); // 创建临时canvas元素
        canvas.width = videoWidth; // 设置画布尺寸与视频尺寸相同
        canvas.height = videoHeight;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 绘制视频第一帧到画布上

        // data.communityForm.video_width = videoWidth; //视频宽
        // data.communityForm.video_height = videoHeight; //视频高
        const imageData = canvas.toDataURL("image/jpeg"); // 转为图像base64
        let video_thumb_name =
          data.videoFile.name.substring(0, data.videoFile.name.lastIndexOf(".")) + ".jpg"; //封面图片名称
        let video_thumb_file = dataURLtoFile(imageData, video_thumb_name); //封面文件
        uploadVideoThumbRef.value.uploadFile({ file: video_thumb_file }); //上传封面文件
      });
    };

    // 封面文件上传成功
    let uploadVideoThumbSucess = (obj) => {
      data.communityForm.video_thumb_url = obj.url; //视频第一帧封面
    };

    // 删除以上传的视频
    let removeVideo = () => {
      data.communityForm.video_thumb_url = "";
      data.communityForm.video_url = "";
      data.videoFile = "";
      communityFormSwitch("图片", false);
      communityFormSwitch("视频", false);
    };

    // 获取全局配置信息
    let getConfigData = () => {
      configData().then((res) => {
        let resultData = res.data;
        data.tabList = resultData.tab; //tab栏
        store.commit("setGlobalConfig", resultData); //存储全局配置
      });
    };

    // 获取表情包配置
    let getWhichConfigData = () => {
      configData({
        id: "?which=2",
      }).then((res) => {
        let resultData = res.data;
        store.commit("setWhichConfigData", resultData); //存储全局配置
      });
    };

    // 获取帖子
    let getIndexPosts = (more) => {
      if (more) {
        data.page += 1;
      } else {
        data.page = 1;
        data.hasMore = true;
        emit("setMore", data.hasMore);
      }
      indexPosts({
        page: data.page,
        type: data.tabActive,
      }).then((res) => {
        let resultList = res.data.data;
        if (more) {
          data.posts = [...data.posts, ...resultList];
        } else {
          data.posts = resultList;
        }
        data.hasMore = resultList.length == res.data.per_page; //是否还有更多
        data.per_page = res.data.per_page;
        emit("setMore", data.hasMore);
      });
    };

    // 附加操作列表点击
    let attachmentListClick = (item) => {
      if (item.disabled) return;
      // 话题
      if (item.type == "topic") {
        promptsInput.value.focus();
        data.prompts = data.prompts + " #";
        proxy.$nextTick(() => {
          promptsInput.value.selectionStart = promptsInput.value.selectionEnd =
            data.prompts.length;
        });
        $("#inputor").atwho("renderView");
      } else if (item.type == "pop") {
        // 弹框
        proxy[item.ref].open();
        // console.log(proxy[item.ref])
      } else if (item.type == "router") {
        router.push(item.path);
      }
    };

    // 选择圈子后的回调 / 移除选中圈子回调
    let circleConfirm = (item) => {
      data.communityForm.circle_id = item ? item.id : "";
      data.selectCircle = item;
      communityFormSwitch("圈子", item ? true : false);
    };

    // 添加链接确定回调
    let linkConfirm = (link) => {
      data.communityForm.posts_content += link;
    };

    // 投票确定回调 / 移除投票回调
    let voteConfirm = (vote) => {
      data.communityForm.vote_list = vote;
      communityFormSwitch("投票", vote.length ? true : false);
      communityFormSwitch("附件", vote.length ? true : false);
      communityFormSwitch("付费", vote.length ? true : false);
    };

    // 附件确定回调
    let uploadFileConfirm = (fileList) => {
      data.communityForm.file_list = fileList;
      communityFormSwitch("投票", true);
    };

    // 移除附件
    let removeFileList = (item, index) => {
      data.communityForm.file_list.splice(index, 1);
      if (!data.communityForm.file_list.length) {
        communityFormSwitch("投票", false);
      }
    };

    // 话题确定回调
    let topicConfirm = (topic) => {
      data.communityForm.tags = topic;
    };

    // 移除话题
    let topicRemove = (item, index) => {
      data.communityForm.tags.splice(index, 1);
      if (!data.communityForm.tags.length) {
        data.communityForm.tags = "";
      }
    };

    // 付费设置确定回调
    let paySettingConfirm = (pay_obj) => {
      if (pay_obj) {
        data.communityForm.pay_obj = pay_obj;
      } else {
        data.communityForm.pay_obj = {
          words_percent: 100, //免费百分比
          is_file: 0, //附件付费  0免费 1付费
          hidden: "", //付费内容
          credit_type: "1", //1余额 0燃油
          price: "", //价格
        };
      }
      communityFormSwitch("投票", pay_obj ? true : false);
      communityFormSwitch("付费", pay_obj ? true : false);
    };

    // 发布按钮点击
    let sendClick = () => {
      if (data.sendLoading) return;
      if (!data.communityForm.posts_content) return; //无内容
      if (data.communityForm.pay_obj.is_file > 0 && !data.communityForm.file_list.length)
        return ElMessage.warning("请上传付费附件");
      if (!data.communityForm.posts_content) return ElMessage.warning("还没说点什么呢");
      // if (!data.communityForm.circle_id) return ElMessage.warning("请选择圈子");
      data.sendLoading = true;
      postAdd({
        ...data.communityForm,
      })
        .then((res) => {
          data.sendLoading = false;
          ElMessage.success(res.data.tip);
          data.communityForm = JSON.parse(JSON.stringify(defaultFormData)); //清空表单数据
          getIndexPosts(); //刷新帖子列表
          data.selectCircle = ""; //清空选中圈子
          data.attachmentList.forEach((item) => (item.disabled = false)); //重置所有附件操作状态
        })
        .catch((err) => {
          data.sendLoading = false;
          return ElMessage.warning(err.message);
        });
    };

    // 付费帖子支付成功后的回调
    let updateItem = (obj) => {
      data.posts.forEach((item) => {
        if (item.id == obj.id) {
          item = Object.assign(item, obj);
          console.log(item, "支付成功回调");
        }
      });
    };

        // 关注后回调
        let followNowUpdate = (obj)=>{
          data.posts.forEach((item) => {
        if (item.user.id == obj.id) {
          item.is_follow_user = obj.is_follow_user
        }
      });
    };

    // 投票成功后的回调
    let voteUpdate = (obj) => {
      data.posts[obj.commentIndex].vote = obj;
    };

    // 帖子视频播放回调
    let videoPlayHandler = (idx) => {
      // console.log("视频播放了"+idx)
      if (idx !== data.videoPlayIdx && (data.videoPlayIdx === 0 || data.videoPlayIdx)) {
        commentItemRefs[data.videoPlayIdx].videoPause();
      }
      data.videoPlayIdx = idx;
    };

    // 如果当前播放的视频停止 清空当前播放视频下标
    let videoEndPlayHandler = (idx) => {
      // console.log("视频暂停了"+idx)
      if (idx === data.videoPlayIdx) {
        data.videoPlayIdx = "";
      }
    };

    onMounted(() => {
      getIndexPosts();
      setTimeout(() => {
        getConfigData(); //获取全局配置
        getWhichConfigData(); //获取表情包等局部配置
      }, 700);
    });

    return {
      followNowUpdate,
      voteUpdate,
      getIndexPosts,
      tabChange,
      topicRemove,
      videoPlayHandler,
      videoEndPlayHandler,
      setCommentItemRef,
      uploadVideoThumbSucess,
      uploadVideoThumbRef,
      removeVideo,
      toFixedNum,
      videoUploadSucess,
      videoUploadFileQueued,
      videoProgressChange,
      updateItem,
      paySettingConfirm,
      sendClick,
      topicConfirm,
      topicRef,
      removeFileList,
      uploadFileConfirm,
      voteConfirm,
      linkConfirm,
      circleConfirm,
      paySettingRef,
      uploadFileRef,
      voteRef,
      circleRef,
      promptsInput,
      linkRef,
      attachmentListClick,
      imgUploadDel,
      fileQueued,
      uploadsucess,
      userInfo,
      ...toRefs(data),
    };
  },
});
</script>
<style>
@import url("@/utils/atwho.css");
</style>
<style lang="scss" scoped>
.communityCenter-box {
  flex: 1;
  margin: 0 10px;
  min-width: 640px;
}

.community-card-box {
  background: #ffffff;
  border-radius: 10px;
}

// 按钮公用样式
.community-btn-class {
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}
.community-btn-default {
  border: 1px solid #65c8dc;
  color: #65c8dc;
}
.community-btn-green {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  color: #ffffff;
}
.community-btn-disabled {
  opacity: 0.7;
}

// 未登录
.communityCenter-no-login {
  padding: 20px;
  margin-bottom: 10px;
  .icon-wdl {
    width: 34px;
    height: 34px;
  }

  .communityCenter-no-login-title {
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    padding-top: 10px;
  }
  .communityCenter-no-login-text {
    font-size: 14px;
    color: #656f79;
    padding-top: 10px;
  }
  .btns-box {
    padding-top: 10px;
    > div:last-child {
      margin-left: 10px;
    }
  }
}

// 发布帖子
.communityCenter-post-box {
  padding: 20px;

  .communityCenter-post {
    flex: 1;
    padding-left: 20px;

    .communityCenter-post-input {
      :deep(.el-textarea__inner) {
        border: none !important;
        background: #f3f4f5;
        border-radius: 10px;
        padding: 10px !important;
        resize: none;
        padding: 0;
        box-shadow: none !important;
        min-height: 80px !important;
        max-height: 480px !important;
        &::placeholder {
          color: #656f79;
        }
        &:focus {
          box-shadow: 0 0 0 1px #64c8dc inset !important;
        }
      }
    }

    // 上传图片列表
    .upload-img-list {
      flex-wrap: wrap;
      //  margin-top: 10px;
      .upload-item {
        margin: 10px 10px 0 0;
        width: 110px;
        height: 110px;
        border-radius: 20px;
        position: relative;

        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 20px;
        }
        .upload-close {
          position: absolute;
          right: 8px;
          top: 8px;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      .upload-more {
        border: 1px solid #ececec;
        .svg-icon {
          width: 24px;
          height: 24px;
          z-index: 10;
        }
      }
    }

    // 投票回显
    .vote-info {
      border-radius: 10px;
      border: 1px dashed #ececec;
      min-height: 80px;
      padding: 10px;
      margin-top: 10px;

      .vote-info-header {
        justify-content: flex-end;
        .svg-icon {
          width: 16px;
          height: 16px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
      .vote-info-detail {
        padding: 5px 0 10px;
        font-size: 14px;
        line-height: 18px;
        .svg-icon {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }

    // 附件回显
    .file-info {
      height: 40px;
      border-radius: 10px;
      background: #f3f4f5;
      padding: 0 20px;
      margin-top: 10px;
      > div {
        font-size: 14px;
        .svg-icon {
          width: 26px;
          height: 26px;
          margin-right: 10px;
        }
      }
      .svg-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }

    // 视频回显
    .video-info {
      margin-top: 10px;
      width: 400px;
      position: relative;

      // 上传进度
      .video-progress-box {
        height: 182px;
        border-radius: 10px;
        background: #000000;
        width: 100%;
        padding: 0 20px;
        .upload-progress-title {
          font-size: 12px;
          // color: #656f79;
          padding-bottom: 4px;
          color: #ffffff;
        }
        .upload-progress {
          //
          height: 6px;
          border-radius: 6px;
          // background: #eaedf0;
          background: rgba(255, 255, 255, 0.5);
          position: relative;
          width: 100%;
          .upload-progress-inner {
            position: absolute;
            // background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
            background: #fff;
            height: 6px;
            border-radius: 6px;
            left: 0;
            top: 0;
          }
        }
      }
      // 视频
      .video-box {
        width: 100%;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        .upload-close {
          position: absolute;
          right: 10px;
          top: 5px;
          width: 20px;
          height: 20px;
          z-index: 10;
          cursor: pointer;
        }
        .video-dom {
          width: 100%;
          object-fit: cover;
          border-radius: 10px;
        }
      }
    }

    // 圈子/话题标签
    .tag-box {
      flex-wrap: wrap;
      padding-top: 10px;
      .tag-item {
        height: 30px;
        border-radius: 30px;
        border: 1px solid #ececec;
        font-size: 12px;
        color: #000000;
        padding: 0 10px;
        margin-top: 10px;
        margin-right: 10px;
        > span {
          padding-right: 6px;
          padding-left: 2px;
        }
        .svg-icon {
          width: 18px;
          height: 18px;
        }
        .svg-icon:last-child {
          cursor: pointer;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }

    // 添加附件操作列表
    .attachment-box {
      .attachment-list {
        flex: 1;
        flex-wrap: wrap;
        .attachment-item {
          font-size: 14px;
          color: #656f79;
          margin-right: 20px;
          margin-top: 20px;
          cursor: pointer;
          .svg-icon {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
          .svg-icon-default {
            display: block;
          }
          .svg-icon-active {
            display: none;
          }

          &:active {
            opacity: 0.7;
          }
        }

        // 鼠标悬停样式
        .attachment-item-hover {
          &:hover {
            color: #64c8dc;
            .svg-icon-default {
              display: none;
            }
            .svg-icon-active {
              display: block;
            }
          }
        }

        // 禁用
        .attachment-item-disabled {
          opacity: 0.5;
          cursor: not-allowed;
          &:active {
            opacity: 0.5;
          }
        }
      }
      //   发布按钮
      .post-btn {
        margin-top: 20px;
        margin-left: 10px;
        border: none;
      }
    }
  }
}

// tab栏
.community-tab {
  margin-top: 10px;
  padding: 20px 40px;

  .tab-item {
    font-size: 14px;
    color: #656f79;
    // margin-right: 80px;
    margin-right: 10%;
    cursor: pointer;
    white-space: nowrap;
  }
  .tab-item-active {
    color: #64c8dc;
    font-weight: bold;
  }

  .tab-item:last-child {
    margin-right: 0px;
  }
}

// 帖子列表
.community-article-list {
  width: 100%;
  .community-article-list-item {
    width: 100%;
    margin-bottom: 10px;
  }
  > div:first-child {
    margin-top: 10px;
  }

  .community-more-title {
    font-size: 14px;
    padding: 10px 0 20px;
    color: #656f79;
  }
}

// 无数据
.community-nodata {
  margin-top: 10px;
}
</style>
